<!-- pages/register/register.vue -->
<template>
    <view class="container">
        <view class="logo">
            <image class="tp" src="/static/image/caishen.png" mode="aspectFit"></image>
        </view>
        <view class="form">
            <uni-forms ref="baseForm">
                <uni-forms-item label="手机号" required>
                    <uni-easyinput type="number" v-model="phone" placeholder="请输入手机号" :rules="phoneRules" @blur="handlePhoneInput" maxlength="11" />
                </uni-forms-item>
				<uni-forms-item label="密码" required v-show="iscode">
				    <view class="password">
				        <uni-easyinput v-model="password" placeholder="请输入密码" type="password" :maxlength="16"></uni-easyinput>
				        <!-- <view v-if="passwordErrorMessage" class="error-message">{{ passwordErrorMessage }}</view> -->
				    </view>
				</uni-forms-item>
                <uni-forms-item label="验证码" required v-show="!iscode">
                    <view class="captcha-input-container">
                        <uni-easyinput v-model="captcha" placeholder="请输入验证码" class="captcha-input" />
                        <button class="yzm" @click="getCode" :disabled="countdown > 0">
                            {{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
                        </button>
                    </view>
                </uni-forms-item>
				 <uni-forms-item>
					 <text @click="loginChange" class="link" >{{iscode?'验证码登录':'密码登录'}}</text>
				 </uni-forms-item>
                <button class="button" type="text" @click="login">登录</button>
            </uni-forms>
			<uni-row>
				<uni-col  :span=24 > 
					<text style="float:right;"> 还未注册?点击:<span class="link" @click="toRegisterPage"> 注册</span></text>
				</uni-col>
			</uni-row>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
			typeMsg: "",
			iscode:true,
            phone: '',
			password:'',
            captcha: '',
            phoneRules: [
                {
                    required: true,
                    message: '手机号不能为空',
                    trigger: 'blur'
                },
                {
                    pattern: /^1[3-9]\d{9}$/,
                    message: '请输入正确的手机号码格式',
                    trigger: 'blur'
                }
            ],
            countdown: 0, // 倒计时初始值
            isDisabled: false, // 按钮是否禁用
            countdownText: '获取验证码' // 按钮初始文字
        };
    },
	onLoad() {
		//const deviceId = uni.getSystemInfoSync().deviceId;
		let phone = uni.getStorageSync("phone")
		if(phone){
			this.phone = phone
		}
	},
    methods: {
		toRegisterPage(){ //  去注册
			uni.navigateTo({
				url: '/pages/login/registration'
			});
		},
		loginChange(){ // 切换登录模式
			this.iscode = !this.iscode
		},
        getCode() {
            // 验证手机号格式
            if (!this.isValidPhone(this.phone)) {
                uni.showToast({
                     title: '请输入正确的格式手机号码',
                    icon: 'none'
                });
            } else {
				let data = {
				    phone: this.phone
				};
				this.$myRequest({
				    method: 'get',
				    url: '/sysUser/getRegisterCode',
				    data: data
				}).then((res) => {
					// 设置倒计时时间
				    this.serverCaptcha = res.data; // 将后端返回的值存储到一个新的变量 serverCaptcha 中
					uni.showToast({
					   title: '获取验证码成功！',
					   icon: 'none'
					});
					this.getCaptcha(); // 开始倒计时
				});
              
             
            }
        },
        getCaptcha() { // 设置倒计时
		  this.countdown = 60; // 设置倒计时时间
            let interval = setInterval(() => {
                this.countdown--;
                if (this.countdown <= 0) {
                    clearInterval(interval);
                    this.countdown = 0;
                }
            }, 1000);
        },
		isValidPhone(phone) { // 手机号验证
		  const regex = /^1[3-9]\d{9}$/; // 中国大陆手机号正则，以1开头，第二位3-9，后面是9位数字
		  return regex.test(phone);
		},
        handlePhoneInput(event) { // 验证手机号事件
            const inputValue = event.target.value;
			if (!this.isValidPhone(inputValue)){
                 uni.showToast({
                     title: '请输入正确的格式手机号码',
                     icon: 'none'
                });
			}
        },
        login() {
			if (!this.isValidPhone(this.phone)){
				uni.showToast({
				     title: '请输入正确的格式手机号码',
				     icon: 'none'
				});
				return
			}
			if(this.iscode){
				if(!this.password){
					uni.showToast({
					     title: '请输入密码',
					     icon: 'none'
					});
					return
				}
			}else{
				if(!this.captcha){
					uni.showToast({
					     title: '请输入验证码',
					     icon: 'none'
					});
					return
				}
			}
			
            let loginData = {
            	username:this.phone,
            	password:this.password,
            	code:this.captcha
            }
            let url = this.iscode ? "/user/login": "/phone/login"
			let that = this
            this.$myRequest({
            	method: 'get',
            	url: url,
            	data:loginData
            }).then((res) => {
				if(res.flag){
					// 记住手机号
					// const deviceId = uni.getSystemInfoSync().deviceId;
					// uni.setStorageSync(deviceId,that.phone)
					uni.setStorageSync("phone",that.phone)
					uni.showToast({
					     title: "登陆成功！",
					     icon: 'none'
					});
					uni.setStorageSync('token',res.data)
					setTimeout(function() {
						uni.switchTab({
							url:'/pages/lottery/index/index'
						});
					},500)
				}else{
					uni.showToast({
					     title: res.data,
					     icon: 'none'
					});
				}
				
             
            })
        }
    }
};
</script>

<style scoped>
	 .link {
	    text-decoration: underline;
	    color:  #742305;;
	    cursor: pointer; /* 将鼠标指针变为手指形状，表示点击 */
	  }
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.logo {
    
}

.form {
    width: 80%;
}

.input {
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    padding: 0 10px;
    border: 1px solid #ccc;
    /* cursor: pointer; */
    border-radius: 4px;
}

.tp {
    width: 300px;
}

.button {
    width: 100%;
    height: 40px;
    background-color: #742305;
    color: #fff;
    border: none;
    text-align: center;
    line-height: 40px;
    border-radius: 4px;
    cursor: pointer;
}

.captcha-input-container {
    position: relative;
    display: inline-block;
    width: 100%;
    pointer-events: all;
}

.yzm {
    width: 40%;
    height: 35px;
    margin-right: -1px;
    font-size: 12px;
    position: absolute;
    top: 1px;
    color: black;
    right: 0;
}

.zc {
    width: 80%;
    height: 40px;
    color: #fff;
    border: none;
    border-radius: 4px;
    background-color: #742305;
}
</style>
